<template>
  <div style="text-align: center; width: 680px; margin: auto; background: #fff">
    <table
      cellpadding="0"
      cellspacing="0"
      style="
        table-layout: fixed;
        position: relative;
        width: 100%;
        font-family: 仿宋_GB2312;
        font-size: 16px;
        margin: auto;
      "
    >
      <tr style="height: 10px">
        <td
          v-for="item in 100"
          :key="item"
          style="width: 1%; text-align: center"
        />
      </tr>
      <tr style="height: 60px">
        <td colspan="100" style="text-align: center">
          <span id="Lab_title" style="font-size: 24px; font-weight: bold"
            >检测单位基本情况</span
          >
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">是否为川渝通办件</td>
        <td colspan="30" class="TableBorderRight">
          <el-checkbox
              v-model="formData.serviceType"
              class="input-center"
              :disabled="disabled"
              true-label="3"
              false-label="1"
              :checked="formData.serviceType==='3'"
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">是否有纸质证书</td>
        <td colspan="30" class="TableBorderOther">
        <input
            v-model.trim="formData.izStock"
            type="checkbox"
            class="input-center"
            :disabled="disabled"
          />
        </td>
        <td colspan="20" class="TableBorderOther">首次发证日期</td>
        <td colspan="30" class="TableBorderRight">
          <AdatePicker
            v-model="formData.firstIssuDate"
            :disabled="disabled"
            :placeholder="''"
            :picker-options="pickerOptions"
            ></AdatePicker>
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">单位名称</td>
        <td colspan="30" class="TableBorderOther">
          {{ formData.unitName }}
        </td>
        <td colspan="20" class="TableBorderOther">设立时间</td>
        <td colspan="30" class="TableBorderRight">
          {{ formData.unitEstTime }}
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">单位地址</td>
        <td colspan="30" class="TableBorderOther">
          {{ formData.unitFullAddr }}
        </td>
        <td colspan="20" class="TableBorderOther">联系电话</td>
        <td colspan="30" class="TableBorderRight">
          {{ formData.unitTel }}
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">
          经办人电话<br />（非常重要）
        </td>
        <td colspan="30" class="TableBorderOther">
          <input
            v-model.trim="formData.jbrdh"
            type="text"
            class="input-center"
            :disabled="disabled"
          />
        </td>
        <td colspan="20" class="TableBorderOther">邮政编码</td>
        <td colspan="30" class="TableBorderRight">
          {{ formData.unitPostCode }}
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">传 真</td>
        <td colspan="30" class="TableBorderOther">
          {{ formData.unitFax }}
        </td>
        <td colspan="20" class="TableBorderOther">电子邮箱</td>
        <td colspan="30" class="TableBorderRight">
          {{ formData.unitEmail }}
        </td>
      </tr>
      <tr style="height: 70px">
        <td colspan="23" class="TableBorderOther">
          统一社会信用代码<br />(工商营业执照注册号、<br />事业法人登记号)
        </td>
        <td colspan="30" class="TableBorderOther">
          {{ formData.creditCode }}
        </td>
        <td colspan="20" class="TableBorderOther">发证机关</td>
        <td colspan="30" class="TableBorderRight">
          {{ formData.fzjg }}
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">注册资金（万元）</td>
        <td colspan="30" class="TableBorderOther">
          {{ formData.zczj }}
        </td>
        <td colspan="20" class="TableBorderOther">经济性质</td>
        <td colspan="30" class="TableBorderRight">
          {{ formData.jjxz }}
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">开户银行</td>
        <td colspan="30" class="TableBorderOther">
          {{ formData.khxh }}
        </td>
        <td colspan="20" class="TableBorderOther">开户银行账号</td>
        <td colspan="30" class="TableBorderRight">
          {{ formData.khxhzh }}
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">计量认证<br />证书号</td>
        <td colspan="30" class="TableBorderOther">
          {{ formData.jlrzzsh }}
        </td>
        <td colspan="20" class="TableBorderOther">发证机关</td>
        <td colspan="30" class="TableBorderRight">
          {{ formData.jlrzfzjg }}
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">法定代表人</td>
        <td colspan="16" class="TableBorderOther">
          {{ formData.fddbrXm }}
        </td>
        <td colspan="10" class="TableBorderOther">职务</td>
        <td colspan="16" class="TableBorderOther">
          {{ formData.fddbrZw }}
        </td>
        <td colspan="10" class="TableBorderOther">职称</td>
        <td colspan="28" class="TableBorderRight">
          {{ $dict('title_level').get(formData.fddbrZc) }}
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">技术负责人</td>
        <td colspan="16" class="TableBorderOther">
          {{ formData.jsfzrXm }}
        </td>
        <td colspan="10" class="TableBorderOther">职务</td>
        <td colspan="16" class="TableBorderOther">
          {{ formData.jsfzrZw }}
        </td>
        <td colspan="10" class="TableBorderOther">职称</td>
        <td colspan="28" class="TableBorderRight">
          {{ $dict('title_level').get(formData.jsfzrZc) }}
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">在编人员总数</td>
        <td colspan="16" class="TableBorderOther">
          {{ formData.zbryzs }}
        </td>
        <td colspan="24" class="TableBorderOther">专业技术人员数</td>
        <td colspan="40" class="TableBorderRight">
          {{ formData.zyjsryrs }}
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">高级职称人数</td>
        <td colspan="16" class="TableBorderOther">
          {{ formData.gjzcrs }}
        </td>
        <td colspan="24" class="TableBorderOther">中级职称人数</td>
        <td colspan="40" class="TableBorderRight">
          {{ formData.zjzcrs }}
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">
          仪器设备<br />总台（套）数
        </td>
        <td colspan="16" class="TableBorderOther">
          {{ formData.sbzs }}
        </td>
        <td colspan="24" class="TableBorderOther">
          仪器设备固定<br />资产原值（万元）
        </td>
        <td colspan="40" class="TableBorderRight">
          {{ formData.sbzcyz }}
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">工作面积（m²）</td>
        <td colspan="16" class="TableBorderOther">
          {{ formData.gzmj }}
        </td>
        <td colspan="24" class="TableBorderOther">房屋建筑面积（m²）</td>
        <td colspan="40" class="TableBorderRight">
          {{ formData.fwjzmj }}
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">申请资质类别和等级</td>
        <td colspan="80" class="TableBorderRight">
          <input
            v-model="formData.sqzzlb"
            type="text"
            class="input-center"
            :disabled="true"
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderBottom">备注</td>
        <td colspan="80" class="TableBorderRightBottom">
          <input
            v-model.trim="formData.bz"
            type="text"
            class="input-center"
            :disabled="disabled"
          />
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import { fieldsValidate } from '@/utils/validate.js';
import AdatePicker from "../../../../../../components/TimePicker/AdatePicker";
export default {
  components: {AdatePicker},
  props: {
    formData: {
      type: Object,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    pickerOptions() {
      return {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      };
    },
    // 表单校验
    formValidated() {
      const rules = {
        jbrdh: [
          { required: true, text: '请输入经办人电话' },
          {
            pattern:
              /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/,
            text: '请输入正确格式的经办人电话',
          },
        ],
        sqzzlb: [
          { required: true, text: '请输入申请资质类别和等级' },
          {
            maxLength: 50,
            text: '申请资质类别和等级长度应小于50位',
          },
        ],
        bz: [
          {
            maxLength: 500,
            text: '备注长度应小于500位',
          },
        ],
      };
      if (this.formData.izStock) {
        rules['firstIssuDate'] = [
          { required: true, text: '请选择首次发证日期' },
        ];
      }
      return fieldsValidate(this.formData, rules, this);
    },
  },
};
</script>
<style lang="scss" scoped>
@import '../../../../../../assets/styles/word.scss';
</style>
